<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://libs.baidu.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="ztree/js/jquery.ztree.excheck.js"></script>
    <style type="text/css">
    
    
        body {
            font-family: 'Microsoft Yahei', sans-serif;
            width:100%;
           // background-color: #eeeeee;
           background:#f9f9f9;
          min-width:35em
        }
        div.container{
      //  outline: solid 2px #337ab7;
        width:calc(100% - 10em);
        margin:0 5em;
        }
        a:hover{
        	text-decoration:none;
        }
        .row{
            margin-top: 10px;
            margin-bottom: 10px;;
        }
        .col-md-2{
            background-color: #337ab7;
            outline: solid 1px #337ab7;
            color: #eeeeee;
            font-weight: bold;
        }
        .row-eq-height{
            display: flex;
             margin:10px 0
        }
        .col-md-10{
            outline: solid 1px #337ab7;
        }
        .input-group{
            margin-top: 5px;
            margin-bottom: 5px;;
        }
		#treeview ul{
			list-style:none;
			}
		#treeview ul li{
			float:left;
			margin-right:20px;
			}
		#define_panel ul{
			list-style:none;
			}
		#define_panel ul li{
			float:left;
			margin-right:5px;
			}
		#treeview ul li a:link{
			text-decoration:none;
			}
		#treeview ul li a:hover{
			color:#F03;
			text-decoration:none;
			}
	     .pt20,.pt40,.pb20,.pb40{
	        text-align:center;
	        color:white
	     }
		.pt20{
			padding-top:20px;
			
		}
		.pt40{
			padding-top:40px;
		}
		.pb20{
			padding-bottom:20px;
		}
		.pb40{
			padding-bottom:40px;
		}
		span.message_recipient{
		   min-width:4em;
		   padding:0.5em;
		   float:left;
		   margin:0.3em 0.5em;
		   border:1px solid #337ab7;
		   border-radius:0.3em;
		   cursor:default;
		   position:relative;
		}
		span.recipient_after{
		   width:1.2em;
		   height:1.1em;
		   background:url("img/add_peason.png") repeat scroll 0 0/1.2em 1.1em;
		   position:absolute;
		   right:-0.5em;
		   top:-0.5em;
		   cursor:pointer;
		}
		ul.ztree li a:hover{
           text-decoration:none
        }
        ul.ztree li a span.button {
           display:none
        }
        ul.ztree li a {
           width:calc(100% - 2em);
           overflow:hidden;
           white-space:nowrap;
           text-overflow:ellipsis
        }
        div.container div.message_accept{
           margin:10px 0 10px 1em;
           width:15em;
           float:left;
        }
       div.container div.message_accept input:nth-child(1){
            float:left;
            margin-bottom:0.5em;
            border-radius:0
         }
       div.container div.message_accept span.glyphicon-search,
       div.container div.message_accept span.glyphicon-remove{
           margin:0.8em 0 0 -1.5em;
           float:left;
           color:#337ab7;
           cursor:pointer;
       }
       div.container div.message_accept p:nth-child(3){
            background:#337ab7;
            color:white;
            font-weight:bold;
            margin:0.5em 0 0;
            padding:0.5em 0.8em;
            width:100%;
            float:left
       }
       ul#treeDemo{
            height:21.8em; 
            overflow-y: auto;
            border:1px solid #337ab7;
       }
       div.message_accept ul.my_tree{
            list-style-type:none;
            margin:0;
            padding:0
       }
       div.message_accept ul.my_tree li{
            cursor:pointer;
            border-bottom:1px solid #efefef;
            padding: 0.4em;
       }
       div.message_accept ul.my_tree li:hover,
       div.message_accept ul.my_tree li.selected
       {
            background: #eea236;
            color:white;
       }
       @media(max-width:48em){
        div.container{
            margin:0 0.5em;
            width:calc(100% - 1em);
        }
    }
    </style>

<title>消息推送后台管理页面</title>
</head>

<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="color:black;">YH</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active" style="font-weight: bold;"><a href="#">消息推送平台后台管理界面 <span class="sr-only">(current)</span></a></li>
                <li id="currentTime" style="line-height: 50px;height: 50px;color: #2bc2f7;margin-left: 50px;">当前时间：时间载入中……</li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"></a></li>

            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container" style="//">

    <div class="row"  style="height: 50px;">
        <p style="font-size: 20px;line-height: 20px;text-align: center;font-weight: bold;">消息推送参数设置</p>
    </div>
    <div style="width:calc(100% - 16em);float:left">
     <div class="row row-eq-height" style="outline: solid 1px #b1dcfb;clear:both;">
        
        <div class="col-sm-2 col-xs-2 col-md-2 pt20 pb20"  >
              <div style="display:table;width:100%;height:100%">  
                 <span style="display:table-cell;vertical-align:middle"> 发送对象</span>
              </div>
        </div>

        <div class="col-sm-10 col-xs-10 col-md-10">
            <div class="checkbox checkbox-success checkbox-inline" id="toAreaCtrl"></div>
        </div>
    </div>
    <div class="row row-eq-height" style="outline: solid 1px #b1dcfb;clear:both;">

        <div class="col-sm-2 col-xs-2 col-md-2 pt20 pb20">
            消息类型
        </div>

        <div class="col-sm-10 col-xs-10 col-md-10">
            <div class="checkbox checkbox-success checkbox-inline">
               <div class="radio radio-info radio-inline" id="typeTS">
                
                <label for="inlineRadio1"  class="checkbox-inline"><input id="inlineRadio3" type="radio" name="radioInline" onclick="tslx(this.id)" value="101">文本</label>
                <label for="inlineRadio2"  class="checkbox-inline"><input id="inlineRadio4" type="radio" name="radioInline" onclick="tslx(this.id)" value="102">地址</label>
               </div>
            </div>
        </div>
    </div>
	
    <div class="row row-eq-height" style="outline: solid 1px #b1dcfb;">
        <div class="col-sm-2 col-xs-2 col-md-2 pt20 pb20">
          功能
        </div>
        <div class="col-sm-10 col-xs-10 col-md-10" id="typeT">
            <div class="input-group" >
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">目标模块</button>
                </div><!-- /btn-group -->
                 <div style="margin-top:-15px;">
                <form role="form">
                <div class="form-group">
                      <select class="form-control"> 
                      	  <option value="" selected="true" disabled="true">必填：输入功能名称</option>
                      </select>
  				</div>
                </form>
                </div>
            </div>

            
        </div>
    </div>
    
    <div class="row row-eq-height" style="outline: solid 1px #b1dcfb;">
        <div class="col-sm-2 col-xs-2 col-md-2 pt20 pb20">
            标题
        </div>
        <div class="col-sm-10 col-xs-10 col-md-10" id="typeT1">
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default" aria-haspopup="true" aria-expanded="false">标题</button>
                   
                </div><!-- /btn-group -->
                <input type="text" class="form-control" aria-label="..." name="title" placeholder="必填：输入消息标题">
            </div>
        </div>
    </div>
    
    <div class="row row-eq-height">
    	<div class="col-sm-2 col-xs-2 col-md-2 pt40 pb40">
            内容
        </div>
        <div class="col-sm-10 col-xs-10 col-md-10">
        	<textarea maxlength="500" rows="2" cols="40" style="width:100%;margin:3px;height:100px;" placeholder="最大输入字数500"></textarea>
        </div>
    </div>
    </div>
    <div class="message_accept">
        <input type="text" class="form-control" aria-label="..." name="title" placeholder="请输入关键字">
        <span class="glyphicon glyphicon-search" ></span>
        <p >通讯录<a style="float:right;color:white;cursor:pointer">自定义</a></p>
        <ul id="treeDemo" class="ztree" style=""></ul>
    </div>
</div>

<div class="row"  style="margin-bottom: 70px;vertical-align:middle;text-align: center;width:100%">
        <button type="button" class="btn btn-info" onclick="submitD();">确认提交</button>
        <button type="button" class=" btn btn-warning">重置参数</button>
    </div>
<div class="row" style="margin:auto 0">
       <div class="col-xs-12">
        <p style="text-align: center;height:50px; line-height:50px;position: fixed;bottom: 0;margin:0;left: 0;width: 100%;background-color: #ccc;color: #0055AA;z-index:99;">
            重庆云华科技有限公司 | Copyright&copy;2015-2016 All Rights Reserved</p><div style="clear:both"></div>
       </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" style="width:80%;">
        <div class="modal-content" >
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">自定义推送成员</h4>
          </div>
          <div class="modal-body row">
          	<div id="define_panel" class="col-md-8" style="height:auto;">
            	<ul>
                </ul>
            </div>
            <div class="col-md-4">
                <label>
                        <input id="input_add" type="text" placeholder="输入学号或者教工号">
                </label>
            	<div>
                    <button type="button" class="btn btn-primary" name="增加" onclick="addPeople(this.name);">添加</button>
                    <button type="button" class="btn btn-primary" name="删除" onclick="addPeople(this.name);">删除</button>
            	</div>
            	
            </div>
          </div>
          <div class="modal-footer" style="text-align:center;">
             <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" onClick="confirm_p();">确认</button>
          </div>
        </div>
      </div>
	</div>
	
	 <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" style="width:30%;">
        <div class="modal-content" >
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">自定义推送成员</h4>
          </div>
          <div class="modal-body row"  style="position:relative;padding:0px 0px 20px 0px;"> 
            <div class="col-md-12" style="margin-left:15px;">
            	<p>EXCEL导入</p>
            	<form id="ajaxform"  method="post" action="RequestCliFnotice_uploadEXCEL.action">
            		<div><input type="file" style="width:150px;display:inline-block;" name="notice.upload"><span class="btn btn-default" onclick="upload();">上传</span></div>
            	</form>
            </div>
            
          </div>
          <a name="TS" style="color:red;padding-left:15px;display:none;">*请添加excel文件</a>
          <div class="modal-footer" style="text-align:center;">
             <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
          </div>
        </div>
      </div>
	</div>
<!--<script type="text/JavaScript">
    function timer(){
        var time=new Date();
        document.getElementById("currentTime").innerHTML="当前时间：" + time;
        //document.write("当前时间：" + time); //因为页面内容被覆盖，所以页面显示当前时间后不会更新
    }
    setInterval("timer()", 1000);
</script>-->
<script>setInterval("currentTime.innerHTML='当前时间: '+new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script>
<script>
var setting = {
        view: {
            selectedMulti: true
        },
        async: {
            enable:true,
            type: "post",
            url: "jsp/connect_objects.json",
            autoparam:["id","pId"],
            otherParam:["name","the_code","operate"] 
         },
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey : "id", 
                pIdKey : "pId"
            }
        },
        callback: {
    		onClick: zTreeOnClick,
    		beforeExpand: beforeExpand
    	}
    };
function zTreeOnClick(event, treeId, treeNode) {
	judge_input(treeNode.the_code,treeNode.sign,treeNode.name);
};
function beforeExpand(treeId, treeNode) {
	if(treeNode.operate=='1'){
		 $.fn.zTree.getZTreeObj("treeDemo").setting.async.url='jsp/connect_objects2.json';
	}
};

function judge_input(code,sign,name){
	$the_father=$(' div#toAreaCtrl');
	var the_length=$the_father.find('span.message_recipient').length;
	if(the_length>=1){
	 for(var n=0;n<the_length;n++){
		 if(($the_father.find('span.message_recipient:eq('+n+')').attr('data-id')!=code||$the_father.find('span.message_recipient:eq('+n+')').attr('data-id')==code&&$the_father.find('span.message_recipient:eq('+n+')').attr('data-sign')!=sign) && n==(the_length-1))
		     $('div#toAreaCtrl').append('<span class="message_recipient"  data-id="'+code+'" data-sign="'+sign+'">'+name+'<span class="recipient_after"></span></span>');
		 else if($the_father.find('span.message_recipient:eq('+n+')').attr('data-id')==code&&$the_father.find('span.message_recipient:eq('+n+')').attr('data-sign')==sign)
			break;
	}}
    if(the_length==0)
    	   $('div#toAreaCtrl').append('<span class="message_recipient"  data-id="'+code+'" data-sign="'+sign+'">'+name+'<span class="recipient_after"></span></span>');
     $('ul#treeDemo').css('height','calc('+ $('ul#treeDemo').parent().prev().outerHeight(true)+'px - 7.2em)');
	$('span.recipient_after').unbind('click').click(function(){
		$(this).parent().remove();
	});
};
function search_object(search_data){
	if(search_data!=''){
		  $('div.message_accept  span').removeClass('glyphicon-search').addClass('glyphicon-remove');
		  $('div.message_accept  span.glyphicon-remove').unbind('click').click(function(){
				$(this).prev().val('');
				$(this).addClass('glyphicon-search').removeClass('glyphicon-remove');
				$('div.message_accept p').text('通讯录');
				$('div.message_accept #treeDemo').empty().removeClass('my_tree').addClass('ztree');
				$.fn.zTree.init($("#treeDemo"), setting);
				 $('div.message_accept  span.glyphicon-search').unbind('click').click(function(){
					  search_object($(this).prev().val());
				  });
			});
		  $('div.message_accept p').text('查找结果：');
		  $('div.message_accept #treeDemo').empty().removeClass('ztree').addClass('my_tree');
		  $.ajax({
			  url:'jsp/connect_objects3.json',
			  data:{param1:search_data},
			  type:'post'
		  }).done(function(data){
			  $('#treeDemo').empty();
			 for(var s1=0;s1<data.length;s1++)
			   $('#treeDemo').append('<li data-id="'+data[s1].the_code+'" data-sign="'+data[s1].sign+'">'+ data[s1].name+'</li>');
			   $('#treeDemo li').click(function(){
				   $(this).addClass('selected').siblings().removeClass('selected');
				   judge_input($(this).attr('data-id'),$(this).attr('data-sign'),$(this).text());
			   });
		  });
		}
		else{
			$('div.the_rrcontainer i').addClass('fa-search').removeClass('fa-remove');
			$('div.the_objects p').text('发送对象');
			$('#treeDemo').empty().removeClass('my_tree').addClass('ztree');
			$.fn.zTree.init($("#treeDemo"), setting);
		}
};
   $(function(){
	  
		  $.fn.zTree.init($("#treeDemo"), setting); 
		  $('div.message_accept  span.glyphicon-search').unbind('click').click(function(){
			  search_object($(this).prev().val());
		  });
   });
</script>
<script>
	function LoadP(type){
		switch(type){
			case "optionsRadios1":
				var treeview = document.getElementById("treeview");
 		 		treeview.innerHTML="";
  			break;
			case "optionsRadios2":
 				var treeview = document.getElementById("treeview");
 		 		treeview.innerHTML="<div class='input-group'><span class='input-group-addon'>@</span><input type='text' id='onepeople' class='form-control' placeholder='输入学号或工号'></div>" 
			break;
			case "optionsRadios3":
				var treeview = document.getElementById("treeview");
				treeview.innerHTML="";
				alert('功能暂未开放');
				//var treeview = document.getElementById("treeview");
 		 		//treeview.innerHTML="<ul><li><label><input type='checkbox' name='checkbox'>车辆工程</label></li><li><label><input type='checkbox' name='checkbox'>电子工程</label></li><li><label><input type='checkbox' name='checkbox'>信息工程</label></li><li><label><input type='checkbox' name='checkbox'>生物工程</label></li></ul>";
			break;
			default:
				var treeview = document.getElementById("treeview");
		 		treeview.innerHTML="";
			}
		}
	/*function funcAdd(){
		<input type='button' onclick='funcAdd();' style='float:left;margin-bottom:10px;' class='btn btn-primary' value='添加'></input><div id='per' style='float:left;margin-bottom:10px;'><ul><li><input type='text' class='form-control' style='margin-bottom:5px;'></li></ul></div>
			$("#per ul").append("<li><input type='text' class='form-control' style='margin-bottom:5px;'></li>");
		}*/
	//推送类型
	function tslx(type){
			switch(type){
				case "inlineRadio3":
					var treeview1 = document.getElementById("treeview1");
	 		 		treeview1.innerHTML="";
	  			break;
				case "inlineRadio4":
					var treeview1 = document.getElementById("treeview1");
					treeview1.innerHTML="";
//					alert('功能暂未开放');
	 		 		treeview1.innerHTML="<div class='input-group'><span class='input-group-addon'>@</span><input type='text' id='website' class='form-control' placeholder='请输入网址' value='http://'></div>";
	  			break;
				case "inlineRadio5":
					var treeview1 = document.getElementById("treeview1");
					treeview1.innerHTML="";
					alert('功能暂未开放');
	 		 		//treeview1.innerHTML="<div class='input-group'><span class='input-group-addon'>@</span><input style='display:none;' type='file' id='pic' class='form-control'><input type='text' style='display:inline-block;width:92%;' id='pic' class='form-control'><span style='display:inline-block;' class='btn btn-default'>添加</span></div>"
				break;
			}
		}
//推送
	function submitD(){
		 var str= new Array();   //成员
		 var push_type;    //推送类型
		 var news_type;	   //消息类型
		 var function_name;//所属功能
		 var title;			//标题
		 var content;		//内容
		 var par=new Array();
			//验证是否为网址
            $("input[name='checkbox']:checkbox").each(function(){ 
                if($(this).is(":checked")){
					str.push($(this).parent().text());
                }
            });
             $("#grid-data td[class=host]").each(function(){ 
					str.push($(this).text());
            });
			$("#treeview ul li a").each(function(){
				var data=this.text.replace(/@\s*/,'');
				str.push(data);
				});
			$("input[id='onepeople']").each(function(){ 
				str.push(this.value);
			});
			push_type=$("#TSpeople input[type='radio']:checked").val();
			news_type=$("#typeTS input[type='radio']:checked").val();
			function_name=$("#typeT select").val();
			title=$("#typeT1 input[name='title']").val();
			$("#typeT1 input[type='text']").each(function(){
				if(this.value!=""){
					par.push(this.value);
				}
				});
			$("#typeT select").each(function(){
				if(this.value!=""){
					par.push(this.value);
				}
			});
			content=$("textarea").val();
			if($("#TSpeople input[type='radio']:checked").val()!='option1'){
				if(content!="" && par.length!=0 && par.length!=1){
					$.ajax({
						url:'RequestCliFnotice_addNotice.action',
						data:{  
									
							        peoples : str.join(),
							        push_type:push_type,
							        news_type:news_type,
							        url :  encodeURIComponent($("#website").val()),
							        function_name:function_name,
							        title:title,
							        content : content,  
							     },  
						type:'post',  
						cache:false,  
						dataType:'json',  
						success:function(data) { 
						alert(data[0].error);  
							      },  
							     	 error : function() {  
							           // view("异常！");  
							          // alert("异常！");  
							      }  
					});
				}else{
					if(push_type==0){
						alert('"所有人"功能暂未开放');
					}else{
						alert('请检查是否填写完所需信息');
					}
					}
				}else{
					if(content!="" && par.length!=0 &&par.length!=1){
						alert('传送2');
						}
						else{
						alert("请填写全部信息");
							}
					}
				//alert(str);
		}
	function addPeople(type){
		 var input=document.getElementById("input_add").value;
		if(type=='增加'){
			if(input!=""){
				 $("#define_panel ul").append("<li contentEditable='true' class='sign'>"+"@"+input+"</li>");	
				}
			}
		else if(type=='删除'){
				 $("#define_panel ul li").remove();
		}
		else{
			ReadExcel();
		}
		}
	function confirm_p(){
			var achieve=document.getElementById("define_panel");
			var treeview = document.getElementById("treeview");
			var peoples=$("li[class='sign']");
			if(peoples.size()!=0){
			treeview.innerHTML="<ul contentEditable='true'></ul>";
			  $("li[class='sign']").each(function(){
				 $("#treeview ul").append("<li class='sign'>"+"<a>"+this.innerHTML+"</a>"+"</li>");
            }); 
			}
			$('#myModal').modal('hide');
		}
</script>
<script>
    var newhtml;
    $.ajax({
		url: "",    //请求的url地址
		dataType: "json",   //返回格式为json
		async: true, //请求是否异步，默认为异步，这也是ajax重要特性
//		data: { "id": "value" },    //参数值
		type: "GET",   //请求方式
		success: function(response) {
			var data=eval(response);
			for(var i=0;i<data.items.length;i++){
				 newhtml+='<option value='+data.items[i].FUNCTION_ID+'>'+data.items[i].FUNCTION_NAME+
			   	'</option>';
			}
			var select2=$("#typeT select option");
		    var select=$("#typeT select");
				select.append(newhtml);
		},
		error: function() {
			//请求出错处理
		}
	});
//上传excel文件
   function upload(){
   if($('#ajaxform div input').val()!="" && $('#ajaxform div input').val()!=null){
   		$('#ajaxform').ajaxForm({   
		            dataType:'json',
		            beforeSubmit:function(){ 
		            }, 
		            success:function(data, statusText){
		            alert(data[0].success);
		            }
			 }).submit(); 
   }else{
   		$('a[name="TS"]').css("display","block");
   		setTimeout(function(){
    	$('a[name="TS"]').css("display","none");
  }, 3000);
   }
   }
   
   
    </script>
</body>
</html>